<template>
  <div>
    <div class="j-brief">
      <router-link to="/jianjie" tag="a" :class="{active: currentAbout == '1'}">{{aboutBrief[0]}}</router-link>
      <router-link to="/chanye" tag="a" :class="{active: currentAbout == '2'}">{{aboutBrief[1]}}</router-link>
      <router-link to="/licheng" tag="a" :class="{active: currentAbout == '3'}">{{aboutBrief[2]}}</router-link>
      <router-link to="/wenhua" tag="a" :class="{active: currentAbout == '4'}">{{aboutBrief[3]}}</router-link>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'nav',
  data () {
    return {
    }
  },
  props: {
    currentAbout: {
      type: String
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'aboutBrief': 'aboutBrief'
    })
  },
  methods: {
    _getChList () {
    },
    _getEnList () {
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .active {
    color: #2154b9;
  }
  .active:hover {
    color: #fff!important;
    background-color: #2154b9
  }
</style>
